<template>
	<div class="main">
		<div class="lf">
			<div class="lf_top">
				<span>菜单名称</span>
				<a-button type="primary" @click="addModule" icon="plus">新增</a-button>
			</div>
			<div class="lf_content">
				<div class="lf_item" v-for="item in dataList" :key="item.id">
					<div @click="chooseModule(item)" class="item_box" :class="{ choose_module: item.id === templateId }">
						<a-tooltip>
							<template slot="title">
								{{ item.name }}
							</template>
							<div class="line-limit-length">
								<span>{{ item.name }}</span>
							</div>
						</a-tooltip>

						<div class="item_box_rg">
							<!-- <span>排序：{{ item.sorting }}&nbsp;&nbsp;</span> -->
							<a href="javascript:;" @click="changeModule(item)">编辑 |</a>
							<a-popconfirm title="是否要删除此数据？" ok-text="确定" cancel-text="取消" @confirm="deleteModule(item)">
								<a href="#"> 删除</a>
							</a-popconfirm>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="rg">
			<div class="rg_top">
				<a-button @click="articlModal.isShowModlue=true" type="primary">新增</a-button>
			</div>
			<a-table :data-source="dataSource" :columns="columns">
				<span slot="action" slot-scope="record">
						<a href="javascript:;" @click="addItem(record)"> 编辑&nbsp;&nbsp;</a>
						<a href="javascript:;" @click="deleteData(record)" >删除</a>
					</span>
			</a-table>
		</div>

		<!-- 新增模块 -->
		<a-modal okText="确定" cancelText="取消" :title="modalConfig.title" v-model="modalConfig.isShowModlue" destroyOnClose @ok="handleModuleOk" @cancel="cancelModule" :maskClosable="false">

			<a-form :form="moduleForm">
				<a-form-item label="菜单名称" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
					<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入菜单名称' }] }]" placeholder="请输入菜单名称"></a-input>
				</a-form-item>
				<!-- <a-form-item label="排序" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            style="width: 100% !important"
            :min="0"
            v-decorator="['sorting', { rules: [{ required: true, message: '请输入排序顺序' }] }]"
            placeholder="请输入"
          ></a-input-number>
        </a-form-item> -->
			</a-form>
		</a-modal>

		<a-modal okText="确定" cancelText="取消" :title="articlModal.title" v-model="articlModal.isShowModlue" destroyOnClose @ok="articleModalOk" @cancel="articleModalCancel" :maskClosable="false">

			<a-form :form="articleForm">
				<a-form-item label="文章标题" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
					<a-input v-decorator="['articleTitle', { rules: [{ required: true, message: '请输入文章标题' }] }]" placeholder="请输入文章标题"></a-input>
				</a-form-item>
				<a-form-item label="文章内容" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
					<a-textarea  v-decorator="['articleContent', { rules: [{ required: true, message: '请输入文章内容' }] }]" placeholder="请输入文章内容"></a-textarea>
				</a-form-item>
				<a-form-item label="所属分类" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
					<a-select  v-decorator="['categoryId', { rules: [{ required: true, message: '请选择分类' }] }]" placeholder="请选择">
						<a-select-option v-for="item in dataList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
					</a-select>
				</a-form-item>
				<!-- <a-form-item label="排序" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            style="width: 100% !important"
            :min="0"
            v-decorator="['sorting', { rules: [{ required: true, message: '请输入排序顺序' }] }]"
            placeholder="请输入"
          ></a-input-number>
        </a-form-item> -->
			</a-form>
		</a-modal>

	</div>
</template>

<script>
import { Category, deleteCategory, addCategory,addArticle,getArticle } from '@/utils/api'
import { dealCatchMessage } from "@/utils/util";
export default {
	name: 'categroy',
	components:{
	},
	data () {
		return {
			dataList: [],
			templateId: '',
			moduleForm: this.$form.createForm(this),
			articleForm: this.$form.createForm(this),
			dataSource: [],
			columns: [
				{
					title: '文章标题',
					dataIndex: 'articleTitle',
					width: 150
				},
				{
					title: '文章内容',
					dataIndex: 'articleContent',
					customRender: (t) => <jEllipsis value={t} length={10} />,
					width: 150
				},
				{
					title: '所属分类',
					dataIndex: 'categoryName',
					width: 150
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					customRender:(text)=>{
						return text?text.substring(0,10):''
					},
					width: 150
				},
				{
					title: '更新时间',
					dataIndex: 'updateTime',
					customRender:(text)=>{
						return text?text.substring(0,10):''
					},
					width: 150
				},
				{
					title: '操作',
					scopedSlots: { customRender: 'action' },
					width: 150
				},
			],
			modalConfig: {
				title: '新增',
				isShowModlue: false,
			},
			articlModal:{
				title:'新增',
			isShowModlue:false
			},
		}
	},
	mounted () {
		this.getCategoryData();
		this.getArticle()
	},
	methods: {
		async getCategoryData () {

			// let params=item==0?{...this.config}:{...this.configtwo}
			// params.orderType=item;
			// params.tradeType=params.retailElectricity?1:0

			this.$loading.show()
			try {
				let res = await Category();
				this.dataList = res.data;
				this.$loading.hide()
			} catch (error) {
				this.$loading.hide()
			}
		},
		addModule () {
			this.modalConfig.isShowModlue = true;

		},
		chooseModule (v) {
			this.templateId = v.id;
		},
		changeModule (v) {
			console.log(v);
		},
		async deleteModule ({ id }) {
			this.$loading.show()
			try {
				let res = await deleteCategory(id);
				if (res.code == 200) {
					this.$message.success(res.msg)
					this.getCategoryData()
				} else throw res
			} catch (error) {
				dealCatchMessage(this, error)
			}

		},
		// 新增
		handleModuleOk () {
			this.$loading.show()
			this.moduleForm.validateFields(async (err, val) => {
				if (err) throw err;
				try {
					let res = await addCategory(val);
					if (res.code == 200) {
						this.modalConfig.isShowModlue = false;
						this.$message.success(res.msg)
						this.getCategoryData();
					} else throw res
				} catch (error) {
					dealCatchMessage(this, error)
				}
			})
		},
		cancelModule () {
			this.modalConfig.isShowModlue = false
		},
		// 获取文章数据
		getArticle(){
			getArticle().then(res=>{
				console.log('查询：',res)
				this.dataSource=res.data;
			}).catch(err=>{
				dealCatchMessage(this, err)
			})
		},
		articleModalOk(){
			this.articlModal.isShowModlue=false;
			this.articleForm.validateFields(async (err,val)=>{
				if(err) throw err;
				try{
					let res=await addArticle(val);
					if(res.code==200){
						this.$message.success(res.msg)
					}else throw res
					// d
				}catch(err){
					dealCatchMessage(this, err)
				}
			})
		},
		articleModalCancel(){
			this.articleForm.resetFields()
			this.articlModal.isShowModlue=false;
		},
		addItem(){

		}
	}
}
</script>

<style lang="less" scoped>
.main {
	background-color: #fff;
	display: flex;
	.lf {
		min-width: 300px;
		flex: 2;
		border: 1px solid #ccc;
		// margin-left: 20px;
		.lf_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			font-weight: 900;
			padding: 5px;
			border-bottom: 1px solid #ccc;
		}
		.lf_content {
			height: 450px; // 必须设定滚动部分的高度
			overflow-y: auto; /*y轴滚动*/
			border-bottom: 1px solid #ccc;
			.lf_item {
				border-bottom: 1px solid #ccc;
				.item_box {
					display: flex;
					justify-content: space-between;
					padding: 10px 20px;
					// padding-left: 20px;
					cursor: pointer;
				}
				.item_box:hover {
					color: #1890ff;
				}
			}
			:last-child {
				border-bottom: 0;
			}
		}
	}
	.rg {
		flex: 8;
		min-width: 70%;
		margin-left: 15px;
		.rg_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			font-weight: 900;
			padding: 5px 15px;
			border: 1px solid #ccc;
			border-left: 0;
			margin-bottom: 10px;
		}
	}
}
.choose_module {
	color: #1890ff;
	background-color: #e6f7ff;
}

</style>